<!-- 主页 -->
<template>
  <div class="main-style">
    <div class="title-style">my nest</div>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <van-image
          fit="cover"
          :src="item.url"
          @click="toDetail(item.id, item.type)"
        />
      </van-swipe-item>
    </van-swipe>

    <div class="main_content">
      <!-- diary -->
      <div class="diary">
        <van-divider content-position="left">
          <span class="music_font">日记</span>
        </van-divider>
        <div class="diary_list">
          <!-- 我的日记 -->
          <div class="my_diary" @click="toMyDiaryListPage">
            <div class="my_diary_img">
              <van-image
                width="5rem"
                height="5rem"
                fit="fill"
                alt="我的日记"
                radius="5px"
                src="https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/diary/diarybook01.jpg"
              />
            </div>
            <div class="my_diary_title">我的日记</div>
          </div>

          <!-- 写日记 -->
          <div class="my_diary" @click="toAddOrEditDiaryPage">
            <div class="my_diary_img">
              <van-image
                width="5rem"
                height="5rem"
                fit="fill"
                alt=""
                radius="5px"
                src="https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/diary/editdiary01.jpg"
              />
            </div>
            <div class="my_diary_title">写写日记</div>
          </div>

          <!-- 空间日记 -->
          <div class="my_diary" @click="toSpaceDiaryPage">
            <div class="my_diary_img">
              <van-image
                width="5rem"
                height="5rem"
                fit="fill"
                alt=""
                radius="5px"
                src="https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/diary/kongjian01.jpg"
              />
            </div>
            <div class="my_diary_title">空间动态</div>
          </div>
        </div>
      </div>

      <!-- 博客 -->
      <div class="diary">
        <van-divider content-position="left">
          <span class="music_font">博客</span>
        </van-divider>
        <div class="diary_list">
          <!-- 我的博客 -->
          <div class="my_diary" @click="toMyBlogListPage">
            <div class="my_diary_img">
              <van-image
                width="5rem"
                height="5rem"
                fit="fill"
                alt="我的博客"
                radius="5px"
                src="https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/blogs/myblog01.jpg"
              />
            </div>
            <div class="my_diary_title">我的博客</div>
          </div>

          <!-- 写博客 -->
          <div class="my_diary" @click="toAddOrEditBlogPage">
            <div class="my_diary_img">
              <van-image
                width="5rem"
                height="5rem"
                fit="fill"
                alt="我的博客"
                radius="5px"
                src="https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/blogs/writeblog.jpg"
              />
            </div>
            <div class="my_diary_title">写写博客</div>
          </div>

          <!-- 空间博客 -->
          <div class="my_diary" @click="toSpaceBlogPage">
            <div class="my_diary_img">
              <van-image
                width="5rem"
                height="5rem"
                fit="fill"
                alt="我的博客"
                radius="5px"
                src="https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/blogs/spaceblog.jpg"
              />
            </div>
            <div class="my_diary_title">空间博客</div>
          </div>
        </div>
      </div>

      <!-- 音乐 -->
      <div class="diary">
        <van-divider content-position="left">
          <span class="music_font">音乐</span>
        </van-divider>
        <div class="diary_list">
          <!-- 推荐歌单 -->
          <div class="my_diary" @click="toRecommendSongListPage">
            <div class="my_diary_img">
              <van-image
                width="5rem"
                height="5rem"
                fit="fill"
                alt="推荐歌单"
                radius="5px"
                src="https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/music/recommendSongList.jpg"
              />
            </div>
            <div class="my_diary_title">推荐歌单</div>
          </div>

          <!-- 我的歌单 -->
          <div class="my_diary" @click="toMySongListPage">
            <div class="my_diary_img">
              <van-image
                width="5rem"
                height="5rem"
                fit="fill"
                alt="我的歌单"
                radius="5px"
                src="https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/music/mySongList01.jpg"
              />
            </div>
            <div class="my_diary_title">我的歌单</div>
          </div>

          <!-- 收藏歌曲 -->
          <div class="my_diary" @click="toMyCollectionSongPage">
            <div class="my_diary_img">
              <van-image
                width="5rem"
                height="5rem"
                fit="fill"
                alt="收藏歌曲"
                radius="5px"
                src="https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/music/collectionSongpic01%2Cjpg.jpg"
              />
            </div>
            <div class="my_diary_title">收藏歌曲</div>
          </div>
        </div>
      </div>
      <br>
      <br>
    </div>
    <br>
    <br>
    <br>
    <br>
  </div>
</template>

<script>
import { Toast } from 'vant'
import requests from '../api/request'
import { getSwiperContent } from '../api/mainPage'
// import { getBanner } from '../api/music'
export default {
  data() {
    return {
      images: [], // 轮播图的内容
    }
  },

  created() {
    // 验证token是否过期
    this.checkToken()
    // 获取轮播图的内容
    this.getSwiperContentFunc()
  },

  methods: {
    // 验证token是否过期
    checkToken() {
      if (
        localStorage.getItem('token') == null ||
        localStorage.getItem('token') === ''
      ) {
        Toast({
          message: '请先登陆！',
          duration: 1000,
        })
        setTimeout(() => {
          this.$router.push('/login')
        }, 800)
      } else {
        requests({
          url: '/user/checkToken',
          method: 'get',
          headers: {
            token: localStorage.getItem('token'),
          },
        }).then((res) => {
          if (res.data.state === false && res.data.msg === 'token已过期！') {
            Toast({
              message: '您长时间未在线，请重新登陆！',
              duration: 1000,
            })
            setTimeout(() => {
              this.$router.push('/login')
            }, 800)
          }
        })
      }
    },

    // 获取轮播图的内容
    getSwiperContentFunc() {
      getSwiperContent().then((res) => {
        // console.log(res)
        this.images = res.data.data
      })
    },

    // 点击轮播图照片去详情页面
    toDetail(id, type) {
      // console.log(type, id)
      if (type === 'diary') {
        this.$router.push({
          path: '/diaryDetail',
          query: {
            diaryAid: id,
          },
        })
      } else {
        this.$router.push({
          path: '/blog/blogDetail',
          query: {
            blogAid: id,
          },
        })
      }
    },

    // 主页
    toMainPage() {
      this.$router.push('/')
    },

    // 去我的页面
    toMyCenter() {
      this.$router.push('/personalCenter')
    },

    // 去我的日记列表页面
    toMyDiaryListPage() {
      this.$router.push('/diary')
    },

    // 去编辑或添加日记页面
    toAddOrEditDiaryPage() {
      this.$router.push({
        path: '/diaryEditOrAdd',
        query: {
          diaryAid: -1,
        },
      })
    },

    // 去空间日记页面
    toSpaceDiaryPage() {
      this.$router.push('/diarySpace')
    },

    // 去我的博客列表页面
    toMyBlogListPage() {
      this.$router.push('/blog/myblog')
    },

    // 去编辑或添加博客页面
    toAddOrEditBlogPage() {
      this.$router.push({
        path: '/blog/blogEditOrAdd',
        query:{
          blogAid: -1,
        }
      })
    },

    // 去空间博客页面
    toSpaceBlogPage() {
      this.$router.push('/blog/blogSpace');
    },

    // 去推荐歌单页面
    toRecommendSongListPage() {
      this.$router.push('/music/recommendSongList')
    },

    // 去我的歌单页面
    toMySongListPage() {},

    // 去歌曲收藏页面
    toMyCollectionSongPage() {},
  },
}
</script>

<style lang="scss" scoped>
.main-style {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  position: absolute;
  top: 0;
  background-color: rgba(106, 174, 228, 0.623);
  background-image: url('https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/bg/dayan_bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.title-style {
  font-size: larger;
  font-weight: 600;
  color: rgba(242, 239, 239, 0.829);
  letter-spacing: 2px;
  text-align: center;
  padding-top: 15px;
  margin-bottom: 15px;
}
.diary {
  font-size: large;
  font-weight: 400;
  color: rgba(242, 239, 239, 0.829);
  letter-spacing: 2px;
  /* padding-left: 20px; */
}
.diary_list {
  width: 100%;
  display: flex;
  // margin: auto;
  // background-color: brown;
  /* align-items:stretch; */
  justify-content: space-evenly;
}
.my_diary_title {
  font-size: 15px;
  font-weight: 600;
  position: relative;
  left: 8px;
}
.music_font {
  color: rgb(220, 223, 225);
}
.main_content {
  width: 90%;
  height: 90%;
  margin: auto;
  // background-color: aqua;
}
.van-swipe {
  width: 100%;
  height: 200px;
  border-radius: 10px;
}
.swiper_img {
  width: 100%;
  height: 200px;
  opacity: 0.7;
}
/deep/ .van-swipe {
  width: 95%;
  margin: auto;
}
</style>
